<template>
	<view class="productListPage" @click="stopPop()">
		<!-- 添加悬浮 -->
		<view class="suspension" @click="addpackageCard()">
			<image class="addIcon" src="../../static/会员卡管理端/addIcon.png" mode=""></image>
		</view>
		<view class="productListPageTop">

			<view class="search-content">

				<image class="search-img" src="../../static/会员卡管理端/组合 405.png" mode=""></image>
				<input placeholder="搜索商品名称" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
					style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />
				<image v-if="searchVal" class="icon_close" src="/static/delect.png" @click="close"></image>
			</view>
			<view class="flex-around margin-top_30rpx">
				<block v-for="(item,index) in navList" :key="index">
					<view :style="{ color: tabIndex == index ? '' : 'rgb(190, 190, 190)' }"
						@click="sell(index,item.value)">
						{{ item.text }}
					</view>
					<!-- 	<view style="color: rgb(190, 190, 190); " class="">
						未上架
					</view> -->
				</block>
			</view>


		</view>
		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<block v-for="(item,index) in list" :key="index">
				<view class="productList">

					<view class="flex-end-top">
						<view class="margin-right_30rpx">
							<image class="img" :src="item.host_img[0]" mode=""></image>
						</view>
						<view class="">
							<view class="font-overflow2" style="width: 504rpx">
								<text style="font-size: 26rpx;"> {{item.name}}</text>
							</view>
							<view class="font-overflow" style="width: 504rpx;color: rgb(153, 153, 153);">
								<text style="font-size: 26rpx;"> {{item.title}}</text>
							</view>
							<view class="flex-between" style="width: 504rpx;">
								<view class="">
									<view :class="[item.title ? '' : 'padding_10rpx_0', ]" style="color: rgb(153, 153, 153);">
										库存：{{item.inventory}} | 销售：{{item.sales_volume}}
									</view>
									<view class="flex-between">
										<view class="">
											¥ {{item.price}}
										</view>

									</view>

								</view>
								<view class="" @click="popFn(index)">
									<image class="pointer" src="../../static/会员卡管理端/微信图片_20240319114221.png"
										mode="aspectFill">
									</image>
								</view>
							</view>
							<view class="container " v-if="isPop&&editIndex==index">
								<view class="flex-around " style="height: 100%;">
									<block v-for="(items,index) in items" >
										<view v-if="packAgeStatus==1&&(items.text!='上架')" class="" @click="isShelvesFn(item,items)">
											<image class="icon" :src="items.img" mode=""></image>
											<view class="">
												<text style="color: #fff;">{{items.text}}</text>
											</view>
										</view>
										<view v-if="packAgeStatus==2&&(items.text!='下架')" @click="isShelvesFn(item,items)" class="">
											<image class="icon" :src="items.img" mode=""></image>
											<view class="">
												<text style="color: #fff;">{{items.text}}</text>
											</view>
										</view>
									</block>
								</view>

								<view class="triangle">

								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</mescroll-body>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				editIndex: '',
				tabIndex: 0,
				searchVal: '',
				items: [{
						img: '../../static/会员卡管理端/Vector (2).png',
						text: '编辑'
					},
					{
						img: '../../static/会员卡管理端/Vector (4).png',
						text: '上架'
					}, {
						img: '../../static/会员卡管理端/Vector (7).png',
						text: '下架'
					},
					{
						img: '../../static/会员卡管理端/Vector (2).png',
						text: '删除'
					}
				],
				downOption: {
					auto: true
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				token: uni.getStorageSync('login').token,
				windowHeight: '',
				list: [],
				// 1 在出售 2 下架
				packAgeStatus: 1,
				isPop: false,
				navList: [{
					text: '出售中',
					value: 1
				}, {
					text: '未上架',
					value: 2
				}],

			}
		},
		onLoad() {
			uni.$on('click', this.showAlert)
		},
		onShow() {
			this.mescroll?.resetUpScroll();

		},
		methods: {

			popFn(index) {


				if (this.editIndex == index) {
					this.isPop = !this.isPop
				} else {
					console.log(this.editIndex)
					this.isPop = false
					this.isPop = !this.isPop
					this.editIndex = index
				}

			},
			showAlert() {
				uni.showToast({
					title: '点击了页面',
					icon: 'none'
				})
			},
			changeInput(name) {
				this.mescroll?.resetUpScroll();
			},
			addpackageCard() {
				this.$sun.navGo('/pages/productManagement/productManagement')
			},
			stopPop() {
				
			},
			async upCallback(scroll) {

				const result = await this.$http.post({
					url: this.$api.goodsList,
					data: {
						page: scroll.num,
						limit: 10,
						status: this.packAgeStatus,
						name: this.searchVal
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {
					console.log('地址管理列表', result);
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					
					this.list = this.list.concat(result.data.list);
					 // = imgStr1.split(',').map((item) => item.trim());
					this.list.forEach((item)=>{
						item.host_img=item.host_img.split(',').map((item) => item.trim());
					})
					
					console.log('this.list', this.list, this.list.length);
				}
			},
			sell(i, item) {
				this.tabIndex = i
				this.packAgeStatus = item
				this.mescroll?.resetUpScroll();
				this.isPop = false
			},
			async isShelvesFn(item,itmes) {
				console.log(item)
				if(itmes.text=='上架'||itmes.text=='下架'){
					uni.showModal({
						title: '提示',
						content: '是否' + (this.packAgeStatus == 1 ? '下架' : '上架') + '商品',
						success: async (res) => {
							if (res.confirm) {
								const result = await this.$http.post({
									url: this.$api.upGoodsStatus,
									data: {
										id: item.id,
										status: this.packAgeStatus == 1 ? 2 : 1
									},
									headers: {
										'Authorization': `Bearer ${this.token}`
									}
					
								})
					
								if (result.code == 0) {
					
									this.isPop = !this.isPop
									this.$sun.toast(result.msg, 'none')
									this.$nextTick(() => {
										this.mescroll?.resetUpScroll();
									})
								} else {
									this.$sun.toast(result.msg, 'none')
								}
					
							} else if (res.cancel) {
					
							}
						}
					});
				}else if (itmes.text=='删除'){
					uni.showModal({
						title: '提示',
						content: '是否要删除该商品',
						success: async (res) => {
							if (res.confirm) {
								const result = await this.$http.post({
									url: this.$api.upGoodsStatus,
									data: {
										id: item.id,
										status: 3
									},
									headers: {
										'Authorization': `Bearer ${this.token}`
									}
					
								})
					
								if (result.code == 0) {
					
									this.isPop = !this.isPop
									this.$sun.toast(result.msg, 'none')
									this.$nextTick(() => {
										this.mescroll?.resetUpScroll();
									})
								} else {
									this.$sun.toast(result.msg, 'none')
								}
					
							} else if (res.cancel) {
					
							}
						}
					});
				}else{
				  this.$sun.navGo('/pages/productManagement/productManagement',{...item})
				  this.isPop = !this.isPop
				}
				


			}
		}
	}
</script>

<style lang="less" scoped>
	.productListPage {
		.suspension {
			position: fixed;
			right: 15rpx;
			width: 96rpx;
			bottom: 140rpx;
			height: 96rpx;
			border-radius: 50%;
			background-color: #fff;
			text-align: center;
			line-height: 126rpx;
			z-index: 999;
			filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.15));

			.addIcon {

				width: 50rpx;
				height: 50rpx;
			}
		}

		.productListPageTop {
			background: rgb(255, 255, 255);

			padding: 34rpx;

			.search-content {
				justify-content: center;
				display: flex;
				align-items: center;
				// width: 446rpx;
				height: 88rpx;

				background: rgb(246, 248, 255);
				;
				border-radius: 84rpx;

				.search-img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 20rpx;
					margin-left: 40rpx;
				}

				.icon_close {
					padding: 0rpx 15rpx;
					width: 36rpx;
					height: 36rpx;
					margin-right: 30rpx;
				}
			}
		}

		.productList {
			position: relative;

			.container {
				top: 55rpx;
				left: 70rpx;
				z-index: 99;

				.icon {
					width: 40rpx;
					height: 40rpx;
				}

				width: 557.62rpx;
				height: 135.68rpx;
				border-radius: 20rpx;
				position: absolute;
				background: rgba(0, 0, 0, 0.4);

				.triangle {
					position: absolute;
					width: 0;
					height: 0;
					right: 0;
					bottom: 20rpx;
					right: -38rpx;
					border-top: 8px solid transparent;
					/* 上边为透明 */
					border-bottom: 8px solid transparent;
					/* 下边为透明 */
					border-left: 20px solid rgba(0, 0, 0, 0.4);
					/* 左边为实色 */
				}
			}

			width: 750rpx;

			.pointer {
				width: 53.8rpx;
				height: 21.52rpx;
			}

			padding: 18rpx;
			background: rgb(255, 255, 255);
			margin-top: 20rpx;

			.img {
				width: 180rpx;
				height: 180rpx;
			}

		}
	}

	page {
		background: #f6f6f6;
	}
</style>